<template >
  <el-container style="margin-top: 15%;margin-left: 0">
    <el-main>
  <!--    <el-slider v-model="this.size" />-->
      <el-space
          wrap :size="size"
              :fill="true"
      >
        <el-card class="border-box" style="width: 100% ;height: 300%">
          <template #header>
            <el-image :src="require('@/assets/paim.jpg') " style="width: 80px ;height: 80px"></el-image>
            <span style="font-size: 20px ;width: 100%;height: 100%">    欢迎来到祈愿分析个人网站</span>
          </template>
          <div>
            <el-form>
              <el-input v-model="linkText" placeholder="https://webstatic.mihoyo.com/hk4e/event/e20190909gacha/index.html?............=hk4e_cn#/log."></el-input>
              <el-button style="margin-top: 8px">提交链接</el-button>
            </el-form>
          </div>
        </el-card>

        <el-card>
          <span style="font-size: 20px ;width: 100%;height: 100%"> 本期up角色</span>
          <span style="font-size: 20px ;width: 100%;height: 100%">  2023/07/05 10:00 - 2023/07/25 17:59</span>
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 100%;height: 100%"></el-image>
        </el-card>
      </el-space>
    </el-main>
<!-- 左边的布局措施-->
    <el-aside v-if="just" style="margin-top: 20px ;margin-left: 0">
      <el-space
          wrap :size="size"
          :fill="true"
      >
      <el-card class="border-box">
        <span style="font-size: 4px ;width: 100%;height: 100%">公告栏，这里会发布管理员的公告</span>
        <el-carousel>
          <el-carousel-item v-for="item in this.messageData" :key="item">
<!--           <span>这是通知公告的展示地方</span>-->
            <el-card>{{item.contents}}</el-card>
          </el-carousel-item>
        </el-carousel>
      </el-card>
<!--  展示前三四名热度用户信息-->
        <el-card class="border-box">
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 20%;height: 20%"></el-image>
          <span style="font-size: 20px ;width: 100%;height: 100%"> 系统活跃用户</span>
          <span>用户详细信息info</span>
          <el-button class="el-button--info">
            查看博主更多信息
          </el-button>
            <!-- 下方展示活跃用户信息贴片-->
        </el-card>
        <el-card class="border-box">
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 20%;height: 20%"></el-image>
          <span style=""> 系统活跃用户</span>
          <span>用户详细信息info</span>
          <el-button class="el-button--info">
            查看博主更多信息
          </el-button>
          <!-- 下方展示活跃用户信息贴片-->
        </el-card>
        <el-card class="border-box">
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 20%;height: 20%"></el-image>
          <span style="font-size: 20px ;width: 100%;height: 100%"> 系统活跃用户</span>
          <span>用户详细信息info</span>
          <el-button class="el-button--info">
            查看博主更多信息
          </el-button>
          <!-- 下方展示活跃用户信息贴片-->
        </el-card>
        <el-card>
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 20%;height: 20%"></el-image>
          <span style=" "> 系统活跃用户</span>
          <span>用户详细信息info</span>
          <el-button class="el-button--info">
            查看博主更多信息
          </el-button>
          <!-- 下方展示活跃用户信息贴片-->
        </el-card>
        <el-card>
          <span>原神活动：</span>
          <el-image :src="require('@/assets/paim.jpg') " style="width: 20%;height: 20%"></el-image>
          <span>管理员发布公告栏</span>
        </el-card>
      </el-space>
    </el-aside>
    <el-footer v-else>
      <el-space
          wrap :size="size"
          :fill="true"
      >
        <el-card class="border-box">
          <span style="font-size: 4px ;width: 100%;height: 100%">公告栏，这里会发布管理员的公告</span>
          <el-carousel>
            <el-carousel-item v-for="item in this.messageData" :key="item">
              <!--           <span>这是通知公告的展示地方</span>-->
              <el-card>{{item.contents}}</el-card>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <!--  展示前三四名热度用户信息-->
        <el-card class="border-box">
          <el-image :src="require('@/assets/3.811.jpg') " style="width: 20%;height: 20%"></el-image>
          <span style=" width: 100%;height: 100%"> 系统活跃用户</span>
          <span>用户详细信息info</span>
          <el-button class="el-button--info">
            查看博主更多信息
          </el-button>
          <!-- 下方展示活跃用户信息贴片-->
        </el-card>
        <el-card>
          <span>原神活动：</span>
          <el-image :src="require('@/assets/paim.jpg') " style="width: 20%;height: 20%"></el-image>
          <span>管理员发布公告栏</span>
        </el-card>
      </el-space>
    </el-footer>
  </el-container>
</template>

<script >

import Axios from "@/api/request/request";

export default {
  name: 'Body',
  data(){
    return{
      size:'30',
      linkText:'',
      messageData:[],
      just: true
    }
  },
  methods:{
    getMessage(){
      Axios.get("/admin/publish?time=2023-09-10 12:21:23").then(({data})=>{
        console.log(data);
        this.messageData=data.data
      })
    },
    isWindows(){
      if (window.innerHeight<900||window.innerWidth<400){
        this.just=!this.just
      }
    }
  },
  mounted() {
    this.getMessage()
    this.isWindows()
  }
}
</script>
<style scoped>

</style>
